<template>
  <!-- clearfix -->
  <div :style="showAnimation" class="msg-general">
    <!-- <div class="back"></div> -->
    <div class="front">
      <div class="box">
        <div class="box-body">
          <div class="body-head">
            <div class="title">
              <div class="title-text">{{ config.title.text }}</div>
              <span class="title-label label-color-blue">{{
                $srv.getI18nByPath('message.' + config.title.type)
              }}</span>
              <span class="title-label label-color-green">{{
                $srv.getI18nBySrv(config.title.category)
              }}</span>
            </div>
            <div class="info">
              <div class="info-item">
                <span style="color: #7cb4f4;" class="wy-icon wy-guangbo"></span>
                <span>{{ msgDate }}</span>
              </div>
              <div class="info-item">
                <span style="color: #ffc83d;" class="wy-icon wy-alert"></span>
                <span>{{ msgTime }}</span>
              </div>
              <div class="info-item">
                <span style="color: #a257d8;" class="wy-icon wy-account"></span>
                <span>{{ config.msgInfo.sender }}</span>
              </div>
            </div>
          </div>
          <div class="body-content">
            <!-- 目前仅支持长文本 -->
            <!-- <span>{{ config.log }}</span> -->
            <span>{{ config.content }}</span>
          </div>
        </div>
        <div class="box-footer">
          <!-- size="large" -->
          <Button
            v-show="config.msgInfo.status === 0"
            shape="circle"
            @click="hide()"
            >{{ '忽略此消息' }}</Button
          >
          <Button
            v-show="config.msgInfo.status === 0"
            type="primary"
            shape="circle"
            @click="confirm"
            >{{ '标记为已读' }}</Button
          >
          <Button
            v-show="config.msgInfo.status !== 0"
            type="info"
            shape="circle"
            @click="hide()"
            >{{ '关闭' }}</Button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

interface config {
  title?: any;
  content?: string;
  msgInfo: any;
  log?: any;
}

@Component({})
export default class oMsgGeneral extends Vue {
  /**
   * props
   */
  @Prop() config: config;

  @Prop() id: number;

  /**
   * data
   */
  private isShow: boolean = false;

  private showAnimation: any = {};

  private msgDate: string = '';

  private msgTime: string = '';

  created() {
    this.getDateTime();
  }

  mounted() {
    this.show();
  }

  private getDateTime() {
    const datetimeStr = this.config.msgInfo.sendTime;
    const dateObj = new Date(datetimeStr);

    // 提取年月日（注意：月份从0开始，需要+1）
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const day = String(dateObj.getDate()).padStart(2, '0');

    // 提取时分秒
    const hours = String(dateObj.getHours()).padStart(2, '0');
    const minutes = String(dateObj.getMinutes()).padStart(2, '0');
    const seconds = String(dateObj.getSeconds()).padStart(2, '0');

    this.msgDate = `${year}年${month}月${day}日`;
    // 凌晨、下/上午、晚上
    let modifier = '';
    const h = dateObj.getHours();
    if (h < 6) {
      modifier = '凌晨';
    } else if (h < 13) {
      modifier = '上午';
    } else if (h < 19) {
      modifier = '下午';
    } else {
      modifier = '夜晚';
    }
    this.msgTime = `${modifier}${hours}:${minutes}:${seconds}`;
  }

  private confirm() {
    this.hide({ action: 'read' });
  }

  public show() {
    const that = this;
    this.showAnimation = {
      display: 'block',
      'z-index': 202 + this.id
    };
    setTimeout(() => {
      that.showAnimation = {
        display: 'block',
        opacity: 1,
        transform: 'translate(0, 0) skew(0deg, 0deg) scale(1)',
        'z-index': 202 + this.id
      };
    }, 200);
  }

  public hide(p: any = null) {
    const that = this;
    this.showAnimation = {
      display: 'block',
      opacity: 0,
      'z-index': 202 + this.id
    };
    setTimeout(() => {
      that.showAnimation = {
        display: 'none',
        'z-index': 202 + this.id,
        transform:
          'translate(calc(100% + 50px), calc(100% + 50px)) skew(-30deg, -50deg) scale(0.5)'
      };
      this.$bus.$emit(`modal_${this.id}`, p);
    }, 200);
  }
}
</script>

<style lang="scss" scoped>
$label-color-blue: (
  'bc': #cae1fc,
  'font': #2977ff
);
$label-color-green: (
  'bc': #daf5ef,
  'font': #008a00
);
.msg-general {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 350px;
  height: 35vh;
  max-width: 350px;
  right: 6px;
  bottom: 6px;
  opacity: 0;
  display: none;
  transform: translate(calc(100% + 50px), calc(100% + 50px))
    skew(-30deg, -50deg) scale(0.5);
  transition: ease-in-out 0.2s;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  .back {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    // border-radius: 10px;
  }
  .front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    // border-radius: 10px;
    .box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: var(--border-radius-model);
      overflow: hidden;
      background-color: #f1f1f1;
      background-color: #f1f1f1;

      .box-body {
        flex: 7;
        padding: 10px 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        background-color: #fff;

        .body-head {
          flex: 1;
          width: 100%;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: start;
          // align-items: center;
          border-bottom: 1px dashed #ccc;
          gap: 10px;
          .title {
            width: 100%;
            display: flex;
            justify-content: start;
            gap: 5px;

            .title-text {
              font-size: 18px;
              font-weight: 700;
              color: rgb(17, 24, 39);
            }

            .title-label {
              display: block;
              font-size: 10px;
              height: 18px;
              padding: 2px 10px;
              border-radius: 9px;
              font-weight: 700;
              display: flex;
              align-items: center;
            }

            .label-color-blue {
              color: map-get($label-color-blue, 'font');
              background-color: map-get($label-color-blue, 'bc');
            }

            .label-color-green {
              color: map-get($label-color-green, 'font');
              background-color: map-get($label-color-green, 'bc');
            }
          }
          .info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            .info-item {
              font-size: 12px;
              // span {
              //   height: 100%;
              //   line-height: 100%;
              // }
              span + span {
                margin-left: 3px;
              }
            }
          }
        }
        .body-content {
          width: 100%;
          flex: 3;
          padding: 10px 5px;
          border-bottom: 1px dashed #ccc;

          span {
            text-indent: 2ch;
          }
        }
      }

      .box-footer {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background-color: #fff;
        padding: 5px 0;

        .ivu-btn {
          width: 40%;
        }
      }
    }
  }
}
</style>
